<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
		<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
		<title>乐优商城--微信支付页</title>
        <link rel="icon" href="/assets/img/favicon.ico">


    <link rel="stylesheet" type="text/css" href="css/webbase.css" />
    <link rel="stylesheet" type="text/css" href="css/pages-weixinpay.css" />
</head>

	<body>

		<!--页面顶部白条条，由js动态加载-->
		<script type="text/javascript" src="plugins/jquery/jquery.min.js"></script>
		<div class="top"></div>
    	<script type="text/javascript">$(".top").load("shortcut.html");</script>

		<div class="cart py-container" id="payApp">
			<!--logoArea-->
			<div class="logoArea">
				<div class="fl logo"><span class="title">收银台</span></div>
			</div>
			<!--主内容-->

			<a href="payfail.html">支付失败演示页</a>
			<a href="paysuccess.html">支付成功演示页</a>


			<div class="checkout py-container  pay">
				<div class="checkout-tit">
					<h4 class="fl tit-txt"><span class="success-icon"></span><span  class="success-info">订单提交成功，请您及时付款！订单号：{{this.orderId}}</span></h4>
                    <span class="fr"><em class="sui-lead">应付金额：</em><em  class="orange money">￥{{this.actualPrice}}</em>元</span>
					<div class="clearfix"></div>
				</div>
				<div class="checkout-steps">
					<div class="fl weixin">微信支付</div>
                    <div class="fl sao">
                        <p class="red">如果二维码已过期，请重新刷新页面</p>
                        <div class="fl code">
                            <div id="qrcode"></div>
                            <div class="saosao">
                                <p>请使用微信扫一扫</p>
                                <p>扫描二维码支付</p>
                            </div>
                        </div>
                        <div class="fl phone">

                        </div>

                    </div>
                    <div class="clearfix"></div>
				    <p><a href="pay.html" target="_blank">> 其他支付方式</a></p>
				</div>
			</div>

		</div>


	<!-- 底部栏位 -->
	<!--页面底部，由js动态加载-->
	<div class="clearfix footer"></div>
	<script type="text/javascript">$(".footer").load("foot.html");</script>
	<!--页面底部END-->


<script type="text/javascript" src="js/pIugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="js/pIugins/jquery.easing/jquery.easing.min.js"></script>
<script type="text/javascript" src="js/pIugins/sui/sui.min.js"></script>
<script type="text/javascript" src="js/widget/nav.js"></script>
<script src="./js/vue/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/common.js"></script>
<script src="./js/qrcode.js"></script>
<script type="text/javascript">
	var payVim = new Vue({
		el: "#payApp",
		data:{
			ly,
			orderId:0,
			actualPrice:0
		},
		created(){
			ly.verify().then(res =>{
				//登录
				this.orderId = ly.getUrlParam("orderId");
				let price = ly.getUrlParam("actualPrice");
				let prices = Number(price).toFixed(1);
				let num = prices.substring(0,prices.length -4);
				this.actualPrice = num;

				ly.http.get("/order/order/url/"+this.orderId+"/"+price).then(({data}) =>{
					new QRCode("qrcode",{
						text:data,
						width:300,
						height:300,
						colorDark:"#000000",
						colorLight:"#ffffff",
						correctLevel: QRCode.CorrectLevel.H
					})
				})
				// 开启定时任务，查询付款状态
				const taskId = setInterval(() => {
					ly.http.get("/order/order/state/" + this.orderId)
							.then(resp => {
								let i = resp.data;
								if (i === 1) {
									// 付款成功
									clearInterval(taskId);
									// 跳转到付款成功页
									location.href = "/paysuccess.html?orderId=" + this.orderId;
								} else if (i === 2) {
									// 付款失败
									clearInterval(taskId);
									// 跳转到付款失败页
									location.href = "/payfail.html";
								}
							})
				}, 3000);
			}).catch(()=>{
				//未登录购物车的查询
				//ly.store.set("LY_CART",this.carts);

				//未登录，跳转到登录页面
				window.location = "http://www.leyou.com/login.html?returnUrl=http://www.leyou.com/pay.html";
			})

		}
	});
</script>
<script type="text/javascript">
			$(function(){
				$("ul.payType li").click(function(){
					$(this).css("border","2px solid #E4393C").siblings().css("border-color","#ddd");
				})
			})
		</script>
</body>

</html>
